<template>
  <div>
    <!--  //1.首页top9新闻控制 -->
    <el-row>
      <el-col :span="24">
        <!-- <h2>首页新闻控制</h2>-->
        <!-- 第一行:根据用户输入向后台请求数据源 -->
        <el-row style="margin-top: 5px">
          <!-- 查找新闻分类 -->
          <el-select
            v-model="listQuery.newsCategoryId"
            placeholder="请选择新闻要查找的新闻分类"
            clearable
            style="width: 200px; margin-left: 20px"
            class="filter-item"
          >
            <el-option
              v-for="item in newsCategories.slice(0, 8)"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleSelectedNewsCategory"
          >
            搜索
          </el-button>
        </el-row>
        <hr>
        <el-table
          :data="NewsCategoryCarouselTableData"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column
            fixed
            label="ID"
            prop="id"
            width="200"
            align="center"
          />
          <el-table-column
            prop="positionValue"
            label="新闻位置值"
            width="100"
            align="center"
          />
          <el-table-column
            prop="newsTitle"
            label="新闻标题"
            width="200"
            align="center"
          />
          <el-table-column
            prop="newsTitlePic"
            label="新闻大图"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-image
                :src="baseImgURL + scope.row.newsTitlePic"
                style="width: 180px; height: 100px"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="newsDescribe"
            label="新闻简介"
            width="300"
            align="center"
          />

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="small"
                @click="handleUpdate(scope.row)"
              >点击修改</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- <top-3-news
          :news="NewsCategoryCarouselTableData"
          style="border: 1px solid grey; margin: 0 3%"
        ></top-3-news
        ><br /> -->
        <carousel
          :carousel-items="NewsCategoryCarouselTableData.slice(3)"
          style="border: 1px solid grey; margin: 0 3% 5% 3%"
        />
      </el-col>
    </el-row>

    <!-- 修改WebSpecialNews Dialog -->
    <el-dialog title="修改WebSpecialNews" :visible.sync="top9NewsDialogVisible">
      <!-- 第一行:根据用户输入向后台请求数据源 -->
      <el-row>
        <div class="filter-container">
          <h4>第一步：查找并添加数据源：</h4>
          <!-- 查找标题 -->
          <el-input
            v-model="listQuery.title"
            placeholder="请输入查找标题"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <!-- 查找新闻分类 -->
          <el-select
            v-model="listQuery.newsCategoryId"
            placeholder="请选择新闻要查找的新闻分类"
            clearable
            disabled
            style="width: 90px"
            class="filter-item"
          >
            <el-option
              v-for="item in newsCategories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <!-- 排序方式：asc升序、Desc降序 -->
          <el-select
            v-model="listQuery.sort"
            style="width: 140px"
            class="filter-item"
            @change="handleFilter"
          >
            <el-option
              v-for="item in sortOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </div>
      </el-row>
      <!-- 第二行：表单：包括WebSpecialNews Id、位置值、旧新闻Title、Select新的新闻 -->
      <el-row>
        <h4>第二步：选择要新绑定的新闻：</h4>
        <el-form
          ref="updatetop9NewsForm"
          :model="temp"
          :rules="rules"
          label-width="150px"
        >
          <el-form-item label="特殊位置新闻编号" prop="id">
            <el-input v-model="temp.id" disabled />
          </el-form-item>
          <el-form-item label="位置值" prop="positionValue">
            <el-input v-model="temp.positionValue" disabled />
          </el-form-item>
          <el-form-item label="已绑定新闻" prop="newsTitle">
            <el-input v-model="temp.newsTitle" disabled />
          </el-form-item>
          <el-form-item label="选择要新绑定的新闻" prop="newNewsId">
            <el-select
              v-model="temp.newNewsId"
              placeholder="请选择"
              :disabled="list.length <= 0"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="top9NewsDialogVisible = false">
              Cancel
            </el-button>
            <el-button type="primary" @click="handleChangeWebSpecialNews">
              Confirm
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>

    <!-- // 2.首页轮播图控制  -->
  </div>
</template>

<script>
import top3News from './components/top3News'
import carousel from './components/carousel.vue'

import {
  getIndexPageNews,
  changeWebSpecialNews,
  getNewsCategoryIndexCarouselNews
} from '@/api/webSpecialNews'
import { getAll } from '@/api/newsCategory'
import {
  getInShowAll,
  getInShowPaged,
  createNews,
  updateNews,
  toAuditNews,
  setWeight,
  deleteNews
} from '@/api/news'
import waves from '@/directive/waves'
import Carousel from './components/carousel.vue'
import {baseNewsTitlePicURL} from '@/utils/constTool'
export default {
  components: {
    top3News,
    waves,
    Carousel
  },
  directives: { waves },
  data() {
    return {
      baseImgURL: baseNewsTitlePicURL,
      NewsCategoryCarouselTableData: [],
      top9NewsDialogVisible: false,

      //   selectedNewsCategoryId: undefined,
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        newsCategoryId: undefined,
        sort: 'desc'
      },
      //   拿到所有的新闻分类
      newsCategories: [],
      calendarTypeOptions: '',
      sortOptions: [
        { label: '权重升序', key: 'asc' },
        { label: '权重降序', key: 'desc' }
      ],
      list: [], // 用来存放从后台拿到的News对象数组

      temp: {
        id: undefined,
        newsDescribe: '',
        newsId: undefined,
        newsTitle: '',
        newsTitlePic: '',
        positionValue: 0,
        newNewsId: undefined
      }, // 用来存放要更改WebSpecialNews对象的临时对象

      rules: {
        newNewsId: [
          {
            required: true,
            message: '请选择一个要绑定的新闻',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  created() {
    // this.getRemotetop9News();
    this.getNewsCategories()
  },
  methods: {
    getRemotetop9News() {
      getIndexPageNews().then((res) => {
        this.NewsCategoryCarouselTableData = res.data
        console.log(this.NewsCategoryCarouselTableData)
      })
    },

    handleUpdate(row) {
      this.top9NewsDialogVisible = true
      this.temp = row
    },

    //   拿到所有的新闻分类
    getNewsCategories() {
      getAll().then((res) => {
        this.newsCategories = res.data
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      console.log(this.listQuery)
      getInShowPaged(this.listQuery).then((response) => {
        // console.log(response);
        this.list = response.data.dataList
        console.log(this.list)
        // this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

    // 修改特殊位置新闻
    handleChangeWebSpecialNews() {
      //   console.log(this.temp);
      changeWebSpecialNews
      this.$refs['updatetop9NewsForm'].validate((valid) => {
        if (valid) {
          changeWebSpecialNews(this.temp.newNewsId, {
            value: this.temp.positionValue
          }).then((res) => {
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
            // 更新table中绑定的信息
            const index = this.NewsCategoryCarouselTableData.findIndex(
              (v) => v.id === this.temp.id
            )
            this.NewsCategoryCarouselTableData.splice(index, 1, res.data)
            this.top9NewsDialogVisible = false
          })
        }
      })
    },
    handleSelectedNewsCategory(selectedNewsCategoryId) {
      // 更新table数据
      getNewsCategoryIndexCarouselNews(this.listQuery.newsCategoryId).then((res) => {
        this.NewsCategoryCarouselTableData = res.data
        console.log(this.NewsCategoryCarouselTableData)
      })
    }
  }
}
</script>
